<template>
	<view class="container">
		<view class="warp u-m-t-20">
			<view class="count u-p-t-36 u-p-b-10 u-flex u-row-center">
				<u-count-to class="count-to" ref="uCountTo" :autoplay="autoplay" :startVal="startVal" :endVal="endVal" :duration="duration"
				 :decimals="decimals" :bold="bold" :fontSize="fontSize" :color="color"></u-count-to>
				<text class="u-m-l-10">名优秀伙伴为您服务</text>
			</view>

			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item class="group" :label-width="200" :border-bottom="false" :label-position="labelPosition"
				 label="我是" prop="ws">
					<u-input :border="border" type="select" :select-open="selectShowWs" v-model="model.ws" placeholder="请选择"
					 placeholderStyle="color: #4B9CFF;" input-align="right" @click="selectShowWs = true"></u-input>
				</u-form-item>
				<u-form-item class="group"  :label-width="200" :border-bottom="false" :label-position="labelPosition"
				 label="我需要" prop="wxy">
					<view style="flex: 1;text-align: right;" @click="handleWxy">
						<u-icon name="arrow-right" style="color:#9DA2B0;font-size: 32upx;"></u-icon>
					</view>
					<!-- <u-input :border="border" type="select" :select-open="selectShowWxy" v-model="model.wxy" placeholder="请选择"
					 placeholderStyle="color: #4B9CFF;" input-align="right" @click="selectShowWxy = true"></u-input> -->
				</u-form-item>
				<u-form-item class="group" :label-width="200" :border-bottom="false" :label-position="labelPosition"
				 label="我意向" prop="wyx">
					<view style="flex: 1;text-align: right;" @click="handleWyx">
						<u-icon name="arrow-right" style="color:#9DA2B0;font-size: 32upx;"></u-icon>
					</view>
					<!-- <u-input :border="border" type="select" :select-open="selectShowWyx" v-model="model.wyx" placeholder="请选择"
					 placeholderStyle="color: #4B9CFF;" input-align="right" @click="selectShowWyx = true"></u-input> -->
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="企业类型" prop="qylx">
					<u-input type="select" :select-open="selectShowQylx" v-model="model.qylx" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowQylx = true"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="企业资质" prop="qyzz">
					<u-input :border="border" placeholder="请输入" v-model="model.qyzz" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="企业地域" prop="qydy">
					<u-input type="select" :select-open="selectShowQydy" v-model="model.qydy" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowQydy = true"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="履约信誉" prop="lyxy">
					<u-input type="select" :select-open="selectShowLyxy" v-model="model.lyxy" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowLyxy = true"></u-input>
				</u-form-item>

				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="企业规模" prop="qygm">
					<u-input :border="border" placeholder="请输入" v-model="model.qygm" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" :border-bottom="false"
				 label="企业名称" prop="qymc">
					<u-input :border="border" placeholder="请输入" v-model="model.qymc" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-gap :bg-color="bgColor" :height="height"></u-gap>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="关键字" prop="gjz">
					<u-input :border="border" placeholder="请输入" v-model="model.gjz" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="屏蔽关键字" prop="pbgjz">
					<u-input :border="border" placeholder="请输入" v-model="model.pbgjz" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" :border-bottom="false"
				 label="匹配时效" prop="ppsx">
					<u-input type="select" :select-open="selectShowPpsx" v-model="model.ppsx" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowPpsx = true"></u-input>
				</u-form-item>
				<u-gap :bg-color="bgColor" :height="height"></u-gap>
				<view class="u-flex u-row-start qita u-p-30">
					<image src="../../static/img/shuoming.png"></image>
					<view class="u-m-l-20">其他说明</view>

				</view>
				<u-form-item class="zwpj u-m-l-30 u-m-r-30 " :label-position="labelPosition" prop="qtsm">
					<u-input type="textarea" :border="border" placeholder="请输入其他说明" v-model="model.qtsm" />
				</u-form-item>
			</u-form>
		</view>
		<view class="warp u-m-t-20 u-p-30">
			<!-- <view class="word">选择几个关键词，为您更精准匹配。</view>
			<view class="keywords u-m-t-40">
				<view :class="{'selected':item.selected}" v-for="(item, index) in keywords" :key="index" @click="selectKey(index)">{{ item.name }}<text></text></view>
			</view> -->
			<u-button class="button" @click="submit">马上为我匹配</u-button>
			<!--弹出框-->
			<u-select mode="single-column" :list="wsList1" v-model="selectShowWs" @confirm="selectConfirmWs"></u-select>
			<u-select mode="single-column" :list="wxyList" v-model="selectShowWxy" @confirm="selectConfirmWxy"></u-select>
			<u-select mode="single-column" :list="wyxList" v-model="selectShowWyx" @confirm="selectConfirmWyx"></u-select>
			<u-select mode="single-column" :list="selectList" v-model="selectShowQylx" @confirm="selectConfirmQylx"></u-select>
			<u-select mode="single-column" :list="selectList" v-model="selectShowQydy" @confirm="selectConfirmQydy"></u-select>
			<u-select mode="single-column" :list="selectList" v-model="selectShowLyxy" @confirm="selectConfirmLyxy"></u-select>
			<u-select mode="single-column" :list="dataList" v-model="selectShowPpsx" @confirm="selectConfirmPpsx"></u-select>
			<!--弹出框-->
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			let that = this;
			return {
				height: 20,
				bgColor: this.$u.color.bgColor,
				/**
				 * form验证
				 * */
				model: {
					ws: '',
					wxy: '',
					wyx: '',
					qymc: '',
					qylx: '',
					qyzz: '',
					qydy: '',
					lyxy: '',
					qygm: '',
					gjz: '',
					pbgjz: '',
					ppsx: '',
					qtsm: '',
				},
				selectList: [
					{
						value: '测试1',
						label: '测试1'
					},
					{
						value: '测试2',
						label: '测试2'
					},
					{
						value: '测试3',
						label: '测试3'
					}
				],
				dataList: [
					{
						value: '2020-11-10',
						label: '2020-11-10'
					},
					{
						value: '2020-12-10',
						label: '2020-12-10'
					},
					{
						value: '2020-12-20',
						label: '2020-12-20'
					}
				],
				wsList1:[
					{
						value: '个人',
						label: '个人'
					},
					{
						value: '企业',
						label: '企业'
					},
					{
						value: '政府',
						label: '政府'
					}
				],
				wsList:[],
				wxyList:[],
				wyxList:[],
				rules: {
					qymc: [{
						required: false,
						message: '请输入企业名称',
						trigger: 'blur'
					}],
					ws: [{
						required: false,
						message: '请选择我是',
						trigger: 'change'
					}],
					wxy: [{
						required: false,
						message: '请选择我需要',
						trigger: 'change'
					}],
					wyx: [{
						required: false,
						message: '请选择我意向',
						trigger: 'change'
					}]
				},
				id: 0,
				iam: 0,
				required: false,
				border: false,
				check: false,
				selectStatus: 'close',
				selectShowWs: false,
				selectShowWxy: false,
				selectShowWyx: false,
				selectShowQylx: false,
				selectShowQydy: false,
				selectShowLyxy: false,
				selectShowPpsx: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['toast'],
				reqBody: {},
				/**/

				/**
				 * 数字统计
				 * */
				startVal: 500,
				endVal: 500,
				separator: ',',
				decimals: 0,
				duration: 2000,
				autoplay: true,
				useEasing: true,
				current: 3,
				isStop: false,
				bold: false,
				fontSize: 24,
				color: '#fff',
				/**/
				keyIndex: 0,
				keywords: [{
					name: '企业',
					selected: true
				}, {
					name: '设计师',
					selected: false
				}, {
					name: '监理',
					selected: false
				}, {
					name: '大型企业',
					selected: false
				}, {
					name: '采购',
					selected: false
				}, {
					name: '监理',
					selected: false
				}]
			};
		},
		mounted() {},
		onShow(){
			// this.wsDictionary();
			// this.wxyDictionary();
			// this.wyxDictionary();
		},
		onLoad(options){
			if(options.id){
				let id = options.id;
				this.id = id;
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			handleWxy(){
				uni.navigateTo({
					url:"/pages/wisdomcommune/communeSelect/wxyContent"
				})
			},
			handleWyx(){
				let identity = this.$store.state.userInfo.identityType
				if(identity == 0){
					uni.navigateTo({
						url:"/pages/wisdomcommune/communeSelect/personalWyxContent"
					})
				}else{
					uni.navigateTo({
						url:"/pages/wisdomcommune/communeSelect/wyxContent"
					})
				}
			},
			//待完善
			async submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						this.communeMatching();
					} else {
						console.log('验证失败');
					}
				});
				
			},
			async communeMatching(){
				try {
					this.reqBody['communeId'] = this.id;
					this.reqBody['qylx'] = this.model['qylx'];
					this.reqBody['area'] = this.model['qydy'];
					this.reqBody['qymc'] = this.model['qymc'];
					this.reqBody['qyzz'] = this.model['qyzz'];
					this.reqBody['qygm'] = this.model['qygm'];
					this.reqBody['lyxy'] = this.model['lyxy'];
					this.reqBody['gjc'] = this.model['gjz'];
					this.reqBody['bbgjz'] = this.model['pbgjz'];
					this.reqBody['remark'] = this.model['qtsm'];
					this.reqBody['ppsx'] = this.model['ppsx'];
					this.reqBody['iam'] = this.iam;
					this.reqBody['imean'] = this.model.wyx;
					this.reqBody['ineed'] = this.model.wxy;
					let data = await this.$apis.communeMatching(this.reqBody);
					console.log(JSON.stringify(data));
					if (data.code == 200) {
						uni.showToast({
							title: "完善信息成功",
							icon: 'none'
						});
						setTimeout(() => {
							this.$mRouter.switchTab({
								route:this.$mRoutesConfig.message
							});
						},2000)
				
					} else {
						uni.showToast({
							title: result.msg,
							icon: 'none'
						});
						return;
					}
				} catch (e) {
					console.log(e);
					this.submitBtnDis = false;
				}
			},
			//查询匹配 我是  字典数据
			async wsDictionary(){
				let reqBody = {};
				reqBody['primary'] = "招投标";
				reqBody['secondary'] = "我是";
				let result = await this.$apis.findMatchingDictionary(reqBody);
				let list = result.data;
				for (let i = 0; i < list.length; i++) {
					let wsValue = {};
					wsValue['value'] = list[i].name;
					wsValue['label'] = list[i].name;
					this.wsList.push(wsValue)
				}
			},
			//查询匹配 我需要  字典数据
			async wxyDictionary(){
				let reqBody = {};
				reqBody['primary'] = "招投标";
				reqBody['secondary'] = "我需要";
				let result = await this.$apis.findMatchingDictionary(reqBody);
				let list = result.data;
				for (let i = 0; i < list.length; i++) {
					let wxyValue = {};
					wxyValue['value'] = list[i].name;
					wxyValue['label'] = list[i].name;
					this.wxyList.push(wxyValue)
				}
			},
			//查询匹配 我意向  字典数据
			async wyxDictionary(){
				let reqBody = {};
				reqBody['primary'] = "招投标";
				reqBody['secondary'] = "我意向";
				let result = await this.$apis.findMatchingDictionary(reqBody);
				let list = result.data;
				for (let i = 0; i < list.length; i++) {
					let wyxValue = {};
					wyxValue['value'] = list[i].name;
					wyxValue['label'] = list[i].name;
					this.wyxList.push(wyxValue)
				}
			},
			selectKey(e) {
				this.model.gjc = this.keywords[e].name
				this.keywords[e].selected = !this.keywords[e].selected;
			},
			// 选择
			selectConfirmWs(e) {
				if(e[0].value=="个人"){
					this.iam = 0
				}else if(e[0].value=="企业"){
					this.iam = 1
				}else{
					this.iam = 2
				}
				this.model.ws = '';
				e.map((val, index) => {
					this.model.ws += this.model.ws == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmWxy(e) {
				this.model.wxy = '';
				e.map((val, index) => {
					this.model.wxy += this.model.wxy == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmWyx(e) {
				this.model.wyx = '';
				e.map((val, index) => {
					this.model.wyx += this.model.wyx == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmQylx(e) {
				this.model.qylx = '';
				e.map((val, index) => {
					this.model.qylx += this.model.qylx == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmQydy(e) {
				this.model.qydy = '';
				e.map((val, index) => {
					this.model.qydy += this.model.qydy == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmLyxy(e) {
				this.model.lyxy = '';
				e.map((val, index) => {
					this.model.lyxy += this.model.lyxy == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmPpsx(e) {
				this.model.ppsx = '';
				e.map((val, index) => {
					this.model.ppsx += this.model.ppsx == '' ? val.label : '-' + val.label;
				});
			}
		}
	};
</script>
<style scoped lang="scss">
	page {
		// background: #f5f5f9;
	}

	.warp {
		background: #fff;
	}

	.count {
		.count-to {
			font-size: 24rpx;
		}

		text {
			padding: 2rpx 12rpx;
			background: #ff9e21;
			color: #ffffff;
			font-size: 24rpx;
		}
	}

	.group {
		padding: 6rpx 21rpx;
		background: #f1f7ff;
		border-radius: 6rpx;
		margin: 30rpx 30rpx 0 30rpx;
	}

	.button {
		width: 662rpx;
		margin: 224rpx auto 95rpx auto;
		background: #ab61ff;
		border-radius: 40rpx;
		border: 0;
		color: #fff;

		&.u-hairline-border:after {
			border: 0;
		}
	}

	.word {
		font-size: 36rpx;
		color: #0d1d36;
		font-weight: bold;
	}

	.keywords {
		display: flex;
		flex-flow: wrap;

		view {
			margin: 0 20rpx 20rpx 0;
			padding: 8rpx 21rpx;
			background: #f6f6f6;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				display: block;
				width: 16rpx;
				height: 16rpx;
				margin-left: 19rpx;
				border: 4rpx solid #BDBDBD;
				border-radius: 8rpx;

			}

			&.selected {
				color: #4B9CFF;

				text {
					border-color: #4B9CFF;
					background-color: #4B9CFF;
				}
			}
		}
	}

	.qita {

		image {
			width: 29rpx;
			height: 29rpx;
			;
		}
	}

	.zwpj {
		width: 690rpx;
		height: 260rpx;
		background-color: #F5F5F9;
		font-size: 30rpx;
		color: #F5F5F9;
		border-radius: 10rpx;
		line-height: 44rpx;
	}
</style>
